<template>
	<view style="height: 100%;padding: 20rpx;">
		<view class="taskBop flex" v-for="(item,index) in 5" :key="index" @click="toDetails">
			<view class="taskImg">
				<image src="../../static/indexad/test1.jpg" mode="aspectFill"></image>
			</view>
			<view class="" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
				<view class="title">
					孙千的蓝调时刻
				</view>
				<view class="describe">
					互动任务 服饰配饰 按互动表现结算哈哈
				</view>
				<view class="money">
					<view class="">
						最高收益￥200
					</view>
				</view>
				<view class="flex time" style="justify-content: space-between;">
					<view class="">
						任务可进行2天
					</view>
					<view class="btn">
						立即参与
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TaskList",
		data() {
			return {

			};
		},
		methods: {
			toDetails() {
				uni.navigateTo({
					url: '/publicPages/task/details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.taskBop {
		height: 240rpx;
		background-color: white;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.taskImg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}
	}

	.title {
		font-weight: 550;
	}

	.describe {
		font-size: 28rpx;
		color: #747172;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 1;
	}



	.money {
		display: flex;

		view {
			color: #DA4268;
			border-radius: 10rpx;
			padding: 5rpx 10rpx;
			border: 1rpx solid #DA4268;
			font-size: 28rpx;
		}

	}

	.time {
		font-size: 28rpx;
		color: #747172;
	}

	.btn {
		font-weight: 550;
		color: #DA4268;
		background-color: #FEF0F4;
		border-radius: 10rpx;
		padding: 10rpx;
	}
</style>